{extend name="public/public"} {block name='css'}
<link rel="stylesheet" href="/static/plug_in/vue3/element-plus.2.3.5.css" />
<style>
  .c1 {
    max-width: 1200px;
    padding: 20px;
    margin: 0 auto;
  }
  .c1 .b1 {
    justify-content: center;
  }
  .c2 {
    max-width: 1200px;
    padding: 20px;
    margin: 0 auto;
  }
  .c2 .b1 {
    padding: 20px;
    border-bottom: 1px solid #f1f1f1;
    font-size: 16px;
  }
</style>
{/block} {block name="content"}
<div id="app">
  <div class="c1">
    <div class="b1 flex">
      <div style="width: 50%">
        <el-input type="text" placeholder="请输入" v-model="search" />
      </div>
      <div>
        <el-button @click="searchFn">搜索</el-button>
      </div>
    </div>
  </div>
  <div class="c2">
    <div class="b1" v-for="(v,i) in list" :key="i">
      <a :href="`/index/index/news_details?id=${v.id}&type_id=${v.type_id}`"
        >{{v.title}}</a
      >
    </div>
  </div>
</div>
{/block} {block name="js"}
<script src="/static/plug_in/vue3/vue.3.2.45.js"></script>
<script src="/static/plug_in/vue3/element-plus.2.3.5.js"></script>
<script>
  const { createApp, reactive } = Vue;
  const App = {
    data() {
      return {
        search: "",
        list: [],
      };
    },
    methods: {
      searchFn() {
        $.post("/index/index/search", { keyWord: this.search }, (res) => {
          console.log(res);
          this.list = res.data;
        });
      },
    },
  };
  const app = createApp(App);
  app.use(ElementPlus);
  app.mount("#app");
</script>
{/block}
